<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1830176" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe83e;</span>
                <div class="name">69上升、增加</div>
                <div class="code-name">&amp;#xe83e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83f;</span>
                <div class="name">70下降、减少</div>
                <div class="code-name">&amp;#xe83f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">分类</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec4c;</span>
                <div class="name">查询</div>
                <div class="code-name">&amp;#xec4c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">待处理</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">已处理</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71f;</span>
                <div class="name">退出全屏</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">message</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">messages</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">方块</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">导出</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">back-top</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">导航</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">大导航</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">小导航</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ce;</span>
                <div class="name">selection</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e0;</span>
                <div class="name">redpacket</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f5;</span>
                <div class="name">we</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fa;</span>
                <div class="name">light</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d1;</span>
                <div class="name">money_bag</div>
                <div class="code-name">&amp;#xe7d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e4;</span>
                <div class="name">goods_new_light</div>
                <div class="code-name">&amp;#xe7e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7fc;</span>
                <div class="name">form_favor_light</div>
                <div class="code-name">&amp;#xe7fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">survey</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">资质能力</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">round_check</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d6;</span>
                <div class="name">square_check</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">line-picture</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">chart-bar</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">point</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">Funnel</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe703;</span>
                <div class="name">rmb</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74e;</span>
                <div class="name">costoms-alearance</div>
                <div class="code-name">&amp;#xe74e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76a;</span>
                <div class="name">training</div>
                <div class="code-name">&amp;#xe76a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b5;</span>
                <div class="name">trading data</div>
                <div class="code-name">&amp;#xe7b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cb;</span>
                <div class="name">资金</div>
                <div class="code-name">&amp;#xe7cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ce;</span>
                <div class="name">extra-inquiries</div>
                <div class="code-name">&amp;#xe7ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">100</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74a;</span>
                <div class="name">connections</div>
                <div class="code-name">&amp;#xe74a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe760;</span>
                <div class="name">pin</div>
                <div class="code-name">&amp;#xe760;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe774;</span>
                <div class="name">unlock</div>
                <div class="code-name">&amp;#xe774;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78a;</span>
                <div class="name">pin-fill</div>
                <div class="code-name">&amp;#xe78a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78f;</span>
                <div class="name">unlock-fill</div>
                <div class="code-name">&amp;#xe78f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74d;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">excel</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">PPT</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">word</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">PDF</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76f;</span>
                <div class="name">store</div>
                <div class="code-name">&amp;#xe76f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a4;</span>
                <div class="name">writing</div>
                <div class="code-name">&amp;#xe7a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b3;</span>
                <div class="name">order</div>
                <div class="code-name">&amp;#xe7b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b4;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe7b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74c;</span>
                <div class="name">customization</div>
                <div class="code-name">&amp;#xe74c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe767;</span>
                <div class="name">success</div>
                <div class="code-name">&amp;#xe767;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76e;</span>
                <div class="name">tool-hardware</div>
                <div class="code-name">&amp;#xe76e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77f;</span>
                <div class="name">folder-fill</div>
                <div class="code-name">&amp;#xe77f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe788;</span>
                <div class="name">reduce-fill</div>
                <div class="code-name">&amp;#xe788;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe789;</span>
                <div class="name">reeor-fill</div>
                <div class="code-name">&amp;#xe789;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a3;</span>
                <div class="name">quick</div>
                <div class="code-name">&amp;#xe7a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe747;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe747;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe748;</span>
                <div class="name">add-cart</div>
                <div class="code-name">&amp;#xe748;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe759;</span>
                <div class="name">multi-language</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75d;</span>
                <div class="name">print</div>
                <div class="code-name">&amp;#xe75d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75f;</span>
                <div class="name">product</div>
                <div class="code-name">&amp;#xe75f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c5;</span>
                <div class="name">缩小</div>
                <div class="code-name">&amp;#xe7c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cd;</span>
                <div class="name">eraser</div>
                <div class="code-name">&amp;#xe7cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7dc;</span>
                <div class="name">inspection</div>
                <div class="code-name">&amp;#xe7dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ef;</span>
                <div class="name">all</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f9;</span>
                <div class="name">integral</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fd;</span>
                <div class="name">nav-list</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe742;</span>
                <div class="name">agriculture</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe745;</span>
                <div class="name">attachent</div>
                <div class="code-name">&amp;#xe745;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe746;</span>
                <div class="name">calculator</div>
                <div class="code-name">&amp;#xe746;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f2;</span>
                <div class="name">component</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f3;</span>
                <div class="name">copy</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe762;</span>
                <div class="name">sales center</div>
                <div class="code-name">&amp;#xe762;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76b;</span>
                <div class="name">upload</div>
                <div class="code-name">&amp;#xe76b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79d;</span>
                <div class="name">collection</div>
                <div class="code-name">&amp;#xe79d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c1;</span>
                <div class="name">办证服务</div>
                <div class="code-name">&amp;#xe7c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74b;</span>
                <div class="name">Customer management</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75e;</span>
                <div class="name">reeor</div>
                <div class="code-name">&amp;#xe75e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe773;</span>
                <div class="name">user center</div>
                <div class="code-name">&amp;#xe773;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b2;</span>
                <div class="name">arrow-down</div>
                <div class="code-name">&amp;#xe7b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76c;</span>
                <div class="name">set</div>
                <div class="code-name">&amp;#xe76c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">最小化</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">最大化</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe743;</span>
                <div class="name">arrow-right</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe744;</span>
                <div class="name">arrow-left</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe754;</span>
                <div class="name">inspection</div>
                <div class="code-name">&amp;#xe754;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75b;</span>
                <div class="name">operation</div>
                <div class="code-name">&amp;#xe75b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe772;</span>
                <div class="name">exchange rate</div>
                <div class="code-name">&amp;#xe772;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a7;</span>
                <div class="name">home</div>
                <div class="code-name">&amp;#xe7a7;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1721636036887') format('woff2'),
       url('iconfont.woff?t=1721636036887') format('woff'),
       url('iconfont.ttf?t=1721636036887') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont iconshangshengzengjia"></span>
            <div class="name">
              69上升、增加
            </div>
            <div class="code-name">.iconshangshengzengjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiajiangjianshao"></span>
            <div class="name">
              70下降、减少
            </div>
            <div class="code-name">.iconxiajiangjianshao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfenlei"></span>
            <div class="name">
              分类
            </div>
            <div class="code-name">.iconfenlei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchaxun"></span>
            <div class="name">
              查询
            </div>
            <div class="code-name">.iconchaxun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondaichuli"></span>
            <div class="name">
              待处理
            </div>
            <div class="code-name">.icondaichuli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyichuli"></span>
            <div class="name">
              已处理
            </div>
            <div class="code-name">.iconyichuli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontuichuquanping"></span>
            <div class="name">
              退出全屏
            </div>
            <div class="code-name">.icontuichuquanping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmessage"></span>
            <div class="name">
              message
            </div>
            <div class="code-name">.iconmessage
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmessages"></span>
            <div class="name">
              messages
            </div>
            <div class="code-name">.iconmessages
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfangkuai"></span>
            <div class="name">
              方块
            </div>
            <div class="code-name">.iconfangkuai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconexport"></span>
            <div class="name">
              导出
            </div>
            <div class="code-name">.iconexport
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconi-back-top"></span>
            <div class="name">
              back-top
            </div>
            <div class="code-name">.iconi-back-top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondaohang"></span>
            <div class="name">
              导航
            </div>
            <div class="code-name">.icondaohang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondadaohang"></span>
            <div class="name">
              大导航
            </div>
            <div class="code-name">.icondadaohang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiaodaohang"></span>
            <div class="name">
              小导航
            </div>
            <div class="code-name">.iconxiaodaohang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconselection"></span>
            <div class="name">
              selection
            </div>
            <div class="code-name">.iconselection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconredpacket"></span>
            <div class="name">
              redpacket
            </div>
            <div class="code-name">.iconredpacket
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconwe"></span>
            <div class="name">
              we
            </div>
            <div class="code-name">.iconwe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlight"></span>
            <div class="name">
              light
            </div>
            <div class="code-name">.iconlight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmoneybag"></span>
            <div class="name">
              money_bag
            </div>
            <div class="code-name">.iconmoneybag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icongoods_new_light"></span>
            <div class="name">
              goods_new_light
            </div>
            <div class="code-name">.icongoods_new_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconform_favor_light"></span>
            <div class="name">
              form_favor_light
            </div>
            <div class="code-name">.iconform_favor_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurvey"></span>
            <div class="name">
              survey
            </div>
            <div class="code-name">.iconsurvey
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzizhinengli"></span>
            <div class="name">
              资质能力
            </div>
            <div class="code-name">.iconzizhinengli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconroundcheck"></span>
            <div class="name">
              round_check
            </div>
            <div class="code-name">.iconroundcheck
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsquarecheck"></span>
            <div class="name">
              square_check
            </div>
            <div class="code-name">.iconsquarecheck
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconline-picture"></span>
            <div class="name">
              line-picture
            </div>
            <div class="code-name">.iconline-picture
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchart-bar"></span>
            <div class="name">
              chart-bar
            </div>
            <div class="code-name">.iconchart-bar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpoint"></span>
            <div class="name">
              point
            </div>
            <div class="code-name">.iconpoint
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconFunnel"></span>
            <div class="name">
              Funnel
            </div>
            <div class="code-name">.iconFunnel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrmb"></span>
            <div class="name">
              rmb
            </div>
            <div class="code-name">.iconrmb
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcostoms-alearance"></span>
            <div class="name">
              costoms-alearance
            </div>
            <div class="code-name">.iconcostoms-alearance
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontraining"></span>
            <div class="name">
              training
            </div>
            <div class="code-name">.icontraining
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontradingdata"></span>
            <div class="name">
              trading data
            </div>
            <div class="code-name">.icontradingdata
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzijin"></span>
            <div class="name">
              资金
            </div>
            <div class="code-name">.iconzijin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconextra-inquiries"></span>
            <div class="name">
              extra-inquiries
            </div>
            <div class="code-name">.iconextra-inquiries
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon-test"></span>
            <div class="name">
              100
            </div>
            <div class="code-name">.iconicon-test
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconconnections"></span>
            <div class="name">
              connections
            </div>
            <div class="code-name">.iconconnections
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpin"></span>
            <div class="name">
              pin
            </div>
            <div class="code-name">.iconpin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconunlock"></span>
            <div class="name">
              unlock
            </div>
            <div class="code-name">.iconunlock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpin-fill"></span>
            <div class="name">
              pin-fill
            </div>
            <div class="code-name">.iconpin-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconunlock-fill"></span>
            <div class="name">
              unlock-fill
            </div>
            <div class="code-name">.iconunlock-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondownload"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.icondownload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconexcel"></span>
            <div class="name">
              excel
            </div>
            <div class="code-name">.iconexcel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconPPT"></span>
            <div class="name">
              PPT
            </div>
            <div class="code-name">.iconPPT
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconword"></span>
            <div class="name">
              word
            </div>
            <div class="code-name">.iconword
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconPDF"></span>
            <div class="name">
              PDF
            </div>
            <div class="code-name">.iconPDF
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconstore"></span>
            <div class="name">
              store
            </div>
            <div class="code-name">.iconstore
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconwriting"></span>
            <div class="name">
              writing
            </div>
            <div class="code-name">.iconwriting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconorder"></span>
            <div class="name">
              order
            </div>
            <div class="code-name">.iconorder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsearch"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.iconsearch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcustomization"></span>
            <div class="name">
              customization
            </div>
            <div class="code-name">.iconcustomization
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsuccess"></span>
            <div class="name">
              success
            </div>
            <div class="code-name">.iconsuccess
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontool-hardware"></span>
            <div class="name">
              tool-hardware
            </div>
            <div class="code-name">.icontool-hardware
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfolder-fill"></span>
            <div class="name">
              folder-fill
            </div>
            <div class="code-name">.iconfolder-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconreduce-fill"></span>
            <div class="name">
              reduce-fill
            </div>
            <div class="code-name">.iconreduce-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconreeor-fill"></span>
            <div class="name">
              reeor-fill
            </div>
            <div class="code-name">.iconreeor-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconquick"></span>
            <div class="name">
              quick
            </div>
            <div class="code-name">.iconquick
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconadd"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.iconadd
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconadd-cart"></span>
            <div class="name">
              add-cart
            </div>
            <div class="code-name">.iconadd-cart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmulti-language"></span>
            <div class="name">
              multi-language
            </div>
            <div class="code-name">.iconmulti-language
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconprint"></span>
            <div class="name">
              print
            </div>
            <div class="code-name">.iconprint
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconproduct"></span>
            <div class="name">
              product
            </div>
            <div class="code-name">.iconproduct
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsuoxiao"></span>
            <div class="name">
              缩小
            </div>
            <div class="code-name">.iconsuoxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconeraser"></span>
            <div class="name">
              eraser
            </div>
            <div class="code-name">.iconeraser
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconinspection1"></span>
            <div class="name">
              inspection
            </div>
            <div class="code-name">.iconinspection1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconall"></span>
            <div class="name">
              all
            </div>
            <div class="code-name">.iconall
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconintegral"></span>
            <div class="name">
              integral
            </div>
            <div class="code-name">.iconintegral
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconnav-list"></span>
            <div class="name">
              nav-list
            </div>
            <div class="code-name">.iconnav-list
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconagriculture"></span>
            <div class="name">
              agriculture
            </div>
            <div class="code-name">.iconagriculture
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconattachent"></span>
            <div class="name">
              attachent
            </div>
            <div class="code-name">.iconattachent
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcalculator"></span>
            <div class="name">
              calculator
            </div>
            <div class="code-name">.iconcalculator
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcomponent"></span>
            <div class="name">
              component
            </div>
            <div class="code-name">.iconcomponent
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcopy"></span>
            <div class="name">
              copy
            </div>
            <div class="code-name">.iconcopy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsalescenter"></span>
            <div class="name">
              sales center
            </div>
            <div class="code-name">.iconsalescenter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconupload"></span>
            <div class="name">
              upload
            </div>
            <div class="code-name">.iconupload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcollection"></span>
            <div class="name">
              collection
            </div>
            <div class="code-name">.iconcollection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbanzhengfuwu"></span>
            <div class="name">
              办证服务
            </div>
            <div class="code-name">.iconbanzhengfuwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconCustomermanagement"></span>
            <div class="name">
              Customer management
            </div>
            <div class="code-name">.iconCustomermanagement
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconreeor"></span>
            <div class="name">
              reeor
            </div>
            <div class="code-name">.iconreeor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconusercenter"></span>
            <div class="name">
              user center
            </div>
            <div class="code-name">.iconusercenter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconarrow-down"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.iconarrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconset"></span>
            <div class="name">
              set
            </div>
            <div class="code-name">.iconset
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzuixiaohua"></span>
            <div class="name">
              最小化
            </div>
            <div class="code-name">.iconzuixiaohua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconguanbi"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.iconguanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzuidahua"></span>
            <div class="name">
              最大化
            </div>
            <div class="code-name">.iconzuidahua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconarrow-right"></span>
            <div class="name">
              arrow-right
            </div>
            <div class="code-name">.iconarrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconarrow-lift"></span>
            <div class="name">
              arrow-left
            </div>
            <div class="code-name">.iconarrow-lift
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconinspection"></span>
            <div class="name">
              inspection
            </div>
            <div class="code-name">.iconinspection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconoperation"></span>
            <div class="name">
              operation
            </div>
            <div class="code-name">.iconoperation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconexchangerate"></span>
            <div class="name">
              exchange rate
            </div>
            <div class="code-name">.iconexchangerate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhome"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">.iconhome
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshangshengzengjia"></use>
                </svg>
                <div class="name">69上升、增加</div>
                <div class="code-name">#iconshangshengzengjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiajiangjianshao"></use>
                </svg>
                <div class="name">70下降、减少</div>
                <div class="code-name">#iconxiajiangjianshao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfenlei"></use>
                </svg>
                <div class="name">分类</div>
                <div class="code-name">#iconfenlei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchaxun"></use>
                </svg>
                <div class="name">查询</div>
                <div class="code-name">#iconchaxun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondaichuli"></use>
                </svg>
                <div class="name">待处理</div>
                <div class="code-name">#icondaichuli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyichuli"></use>
                </svg>
                <div class="name">已处理</div>
                <div class="code-name">#iconyichuli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontuichuquanping"></use>
                </svg>
                <div class="name">退出全屏</div>
                <div class="code-name">#icontuichuquanping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmessage"></use>
                </svg>
                <div class="name">message</div>
                <div class="code-name">#iconmessage</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmessages"></use>
                </svg>
                <div class="name">messages</div>
                <div class="code-name">#iconmessages</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfangkuai"></use>
                </svg>
                <div class="name">方块</div>
                <div class="code-name">#iconfangkuai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconexport"></use>
                </svg>
                <div class="name">导出</div>
                <div class="code-name">#iconexport</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconi-back-top"></use>
                </svg>
                <div class="name">back-top</div>
                <div class="code-name">#iconi-back-top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondaohang"></use>
                </svg>
                <div class="name">导航</div>
                <div class="code-name">#icondaohang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondadaohang"></use>
                </svg>
                <div class="name">大导航</div>
                <div class="code-name">#icondadaohang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiaodaohang"></use>
                </svg>
                <div class="name">小导航</div>
                <div class="code-name">#iconxiaodaohang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconselection"></use>
                </svg>
                <div class="name">selection</div>
                <div class="code-name">#iconselection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconredpacket"></use>
                </svg>
                <div class="name">redpacket</div>
                <div class="code-name">#iconredpacket</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconwe"></use>
                </svg>
                <div class="name">we</div>
                <div class="code-name">#iconwe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlight"></use>
                </svg>
                <div class="name">light</div>
                <div class="code-name">#iconlight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmoneybag"></use>
                </svg>
                <div class="name">money_bag</div>
                <div class="code-name">#iconmoneybag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icongoods_new_light"></use>
                </svg>
                <div class="name">goods_new_light</div>
                <div class="code-name">#icongoods_new_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconform_favor_light"></use>
                </svg>
                <div class="name">form_favor_light</div>
                <div class="code-name">#iconform_favor_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurvey"></use>
                </svg>
                <div class="name">survey</div>
                <div class="code-name">#iconsurvey</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzizhinengli"></use>
                </svg>
                <div class="name">资质能力</div>
                <div class="code-name">#iconzizhinengli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconroundcheck"></use>
                </svg>
                <div class="name">round_check</div>
                <div class="code-name">#iconroundcheck</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsquarecheck"></use>
                </svg>
                <div class="name">square_check</div>
                <div class="code-name">#iconsquarecheck</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconline-picture"></use>
                </svg>
                <div class="name">line-picture</div>
                <div class="code-name">#iconline-picture</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchart-bar"></use>
                </svg>
                <div class="name">chart-bar</div>
                <div class="code-name">#iconchart-bar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpoint"></use>
                </svg>
                <div class="name">point</div>
                <div class="code-name">#iconpoint</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconFunnel"></use>
                </svg>
                <div class="name">Funnel</div>
                <div class="code-name">#iconFunnel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrmb"></use>
                </svg>
                <div class="name">rmb</div>
                <div class="code-name">#iconrmb</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcostoms-alearance"></use>
                </svg>
                <div class="name">costoms-alearance</div>
                <div class="code-name">#iconcostoms-alearance</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontraining"></use>
                </svg>
                <div class="name">training</div>
                <div class="code-name">#icontraining</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontradingdata"></use>
                </svg>
                <div class="name">trading data</div>
                <div class="code-name">#icontradingdata</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzijin"></use>
                </svg>
                <div class="name">资金</div>
                <div class="code-name">#iconzijin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconextra-inquiries"></use>
                </svg>
                <div class="name">extra-inquiries</div>
                <div class="code-name">#iconextra-inquiries</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon-test"></use>
                </svg>
                <div class="name">100</div>
                <div class="code-name">#iconicon-test</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconconnections"></use>
                </svg>
                <div class="name">connections</div>
                <div class="code-name">#iconconnections</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpin"></use>
                </svg>
                <div class="name">pin</div>
                <div class="code-name">#iconpin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconunlock"></use>
                </svg>
                <div class="name">unlock</div>
                <div class="code-name">#iconunlock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpin-fill"></use>
                </svg>
                <div class="name">pin-fill</div>
                <div class="code-name">#iconpin-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconunlock-fill"></use>
                </svg>
                <div class="name">unlock-fill</div>
                <div class="code-name">#iconunlock-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondownload"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#icondownload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconexcel"></use>
                </svg>
                <div class="name">excel</div>
                <div class="code-name">#iconexcel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconPPT"></use>
                </svg>
                <div class="name">PPT</div>
                <div class="code-name">#iconPPT</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconword"></use>
                </svg>
                <div class="name">word</div>
                <div class="code-name">#iconword</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconPDF"></use>
                </svg>
                <div class="name">PDF</div>
                <div class="code-name">#iconPDF</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconstore"></use>
                </svg>
                <div class="name">store</div>
                <div class="code-name">#iconstore</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconwriting"></use>
                </svg>
                <div class="name">writing</div>
                <div class="code-name">#iconwriting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconorder"></use>
                </svg>
                <div class="name">order</div>
                <div class="code-name">#iconorder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsearch"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#iconsearch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcustomization"></use>
                </svg>
                <div class="name">customization</div>
                <div class="code-name">#iconcustomization</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsuccess"></use>
                </svg>
                <div class="name">success</div>
                <div class="code-name">#iconsuccess</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontool-hardware"></use>
                </svg>
                <div class="name">tool-hardware</div>
                <div class="code-name">#icontool-hardware</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfolder-fill"></use>
                </svg>
                <div class="name">folder-fill</div>
                <div class="code-name">#iconfolder-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconreduce-fill"></use>
                </svg>
                <div class="name">reduce-fill</div>
                <div class="code-name">#iconreduce-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconreeor-fill"></use>
                </svg>
                <div class="name">reeor-fill</div>
                <div class="code-name">#iconreeor-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconquick"></use>
                </svg>
                <div class="name">quick</div>
                <div class="code-name">#iconquick</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconadd"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#iconadd</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconadd-cart"></use>
                </svg>
                <div class="name">add-cart</div>
                <div class="code-name">#iconadd-cart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmulti-language"></use>
                </svg>
                <div class="name">multi-language</div>
                <div class="code-name">#iconmulti-language</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconprint"></use>
                </svg>
                <div class="name">print</div>
                <div class="code-name">#iconprint</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconproduct"></use>
                </svg>
                <div class="name">product</div>
                <div class="code-name">#iconproduct</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsuoxiao"></use>
                </svg>
                <div class="name">缩小</div>
                <div class="code-name">#iconsuoxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconeraser"></use>
                </svg>
                <div class="name">eraser</div>
                <div class="code-name">#iconeraser</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconinspection1"></use>
                </svg>
                <div class="name">inspection</div>
                <div class="code-name">#iconinspection1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconall"></use>
                </svg>
                <div class="name">all</div>
                <div class="code-name">#iconall</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconintegral"></use>
                </svg>
                <div class="name">integral</div>
                <div class="code-name">#iconintegral</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconnav-list"></use>
                </svg>
                <div class="name">nav-list</div>
                <div class="code-name">#iconnav-list</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconagriculture"></use>
                </svg>
                <div class="name">agriculture</div>
                <div class="code-name">#iconagriculture</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconattachent"></use>
                </svg>
                <div class="name">attachent</div>
                <div class="code-name">#iconattachent</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcalculator"></use>
                </svg>
                <div class="name">calculator</div>
                <div class="code-name">#iconcalculator</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcomponent"></use>
                </svg>
                <div class="name">component</div>
                <div class="code-name">#iconcomponent</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcopy"></use>
                </svg>
                <div class="name">copy</div>
                <div class="code-name">#iconcopy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsalescenter"></use>
                </svg>
                <div class="name">sales center</div>
                <div class="code-name">#iconsalescenter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconupload"></use>
                </svg>
                <div class="name">upload</div>
                <div class="code-name">#iconupload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcollection"></use>
                </svg>
                <div class="name">collection</div>
                <div class="code-name">#iconcollection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbanzhengfuwu"></use>
                </svg>
                <div class="name">办证服务</div>
                <div class="code-name">#iconbanzhengfuwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconCustomermanagement"></use>
                </svg>
                <div class="name">Customer management</div>
                <div class="code-name">#iconCustomermanagement</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconreeor"></use>
                </svg>
                <div class="name">reeor</div>
                <div class="code-name">#iconreeor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconusercenter"></use>
                </svg>
                <div class="name">user center</div>
                <div class="code-name">#iconusercenter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconarrow-down"></use>
                </svg>
                <div class="name">arrow-down</div>
                <div class="code-name">#iconarrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconset"></use>
                </svg>
                <div class="name">set</div>
                <div class="code-name">#iconset</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzuixiaohua"></use>
                </svg>
                <div class="name">最小化</div>
                <div class="code-name">#iconzuixiaohua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconguanbi"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#iconguanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzuidahua"></use>
                </svg>
                <div class="name">最大化</div>
                <div class="code-name">#iconzuidahua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconarrow-right"></use>
                </svg>
                <div class="name">arrow-right</div>
                <div class="code-name">#iconarrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconarrow-lift"></use>
                </svg>
                <div class="name">arrow-left</div>
                <div class="code-name">#iconarrow-lift</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconinspection"></use>
                </svg>
                <div class="name">inspection</div>
                <div class="code-name">#iconinspection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconoperation"></use>
                </svg>
                <div class="name">operation</div>
                <div class="code-name">#iconoperation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconexchangerate"></use>
                </svg>
                <div class="name">exchange rate</div>
                <div class="code-name">#iconexchangerate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhome"></use>
                </svg>
                <div class="name">home</div>
                <div class="code-name">#iconhome</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
